<template>
  <div class="collection">
    <all-header :title="$route.meta.title"></all-header>

    <van-tabs
      v-model:active="tab"
      title-active-color="black"
      color="black"
      class="tab"
    >
      <van-tab title="我的藏品" name="one"></van-tab>
      <van-tab title="已发布" name="two"></van-tab>
      <van-tab title="已卖出" name="three"></van-tab>
    </van-tabs>
    <div class="collectionList">
      <van-pull-refresh
        v-model="refreshLoading"
        @refresh="onRefresh"
        class="refresh"
      >
        <van-empty
          description="暂无藏品"
          v-if="collectionList.length < 1 && !loading"
        />
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了, 拉我刷新"
          @load="onLoad"
        >
          <div
            class="item"
            v-for="item in collectionList"
            :key="item.id"
            @click="toPage(item.id)"
          >
            <div class="left">
              <div class="main">
                <div class="img">
                  <img :src="setting.file_url + item.photo" />
                </div>
                <div class="text">
                  <div class="title">
                    <div class="name">{{ item.name }}</div>
                    <div class="type">
                      <van-tag color="black">{{
                        typeText[item.type].title
                      }}</van-tag>
                    </div>
                  </div>
                  <div class="number">编号:{{ item.no }}</div>
                  <div class="price">
                    ￥<span>{{ item.price }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="top">
                <span>查看详情</span
                ><img src="../assets/image/my/mores.png" alt="" />
              </div>
              <div class="num">
                X<span>{{ item.goods_num }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import marketStore from "../store/market";
import commonStore from "../store/common";
import { computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";

let refreshLoading = ref(false);
const loading = ref(false);
const finished = ref(false);
const common = commonStore();
const setting = computed(() => common.setting);

const typeText = {
  1: {
    title: "首发",
  },
  2: {
    title: "空投",
  },
  3: {
    title: "合成",
  },
  4: {
    title: "盲盒",
  },
};

let param = ref({
  page: 1,
  status: "",
});

const market = marketStore();
const collectionList = ref([]);
const getCollectionList = () => {
  loading.value = true;
  refreshLoading.value = false;
  finished.value = false;
  market
    .getMyCollectionList(param.value)
    .then((res) => {
      loading.value = false;
      refreshLoading.value = false;
      if (param.value.page != res.last_page) {
        param.value.page++;
      } else {
        finished.value = true;
      }
      collectionList.value.push(...res.data);
    })
    .catch(() => {
      refreshLoading.value = false;
      loading.value = false;
      finished.value = true
    });
};

const getSaleList = () => {
  loading.value = true;
  refreshLoading.value = false;
  finished.value = false;
  market
    .getSaleList(param.value)
    .then((res) => {
      loading.value = false;
      refreshLoading.value = false;
      if (param.value.page != res.last_page) {
        param.value.page++;
      } else {
        finished.value = true;
      }
      collectionList.value.push(...res.data);
    })
    .catch(() => {
      refreshLoading.value = false;
      loading.value = false;
      finished.value = true
    });
};

const onRefresh = async () => {
  refreshLoading.value = true;
  collectionList.value = [];
  onLoad();
};

const router = useRouter();
const toPage = (id) => {
  // 已发布和已卖出的没写
  router.push({ name: "collectionDetail", params: { id: id } });
};

const route = useRoute();
const tab = ref(route.params.type);
const onLoad = () => {
  if (tab.value == "one" || tab.value == "two") {
    if (tab.value == "two") {
      param.value.status = [0, 4];
    } else {
      param.value.status = "";
    }
    getCollectionList();
  } else {
    getSaleList();
  }
};

watch(tab, () => {
  collectionList.value = [];
  if (tab.value == "one") {
    param.value.is_group = 1;
  } else {
    param.value.is_group = 0;
  }
  onRefresh();
});
</script>

<style lang="scss" scoped>
.tab {
  position: fixed;
  top: 0.7692rem;
  z-index: 999;
  width: 100%;
}
.collectionList {
  width: 100%;
  height: 88%;
  padding-top: 20%;

  .item {
    display: flex;
    justify-content: space-between;
    padding: 0.3846rem;
    .left {
      .main {
        display: flex;
        .text {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .number {
            font-weight: bold;
            color: #666666;
          }

          .price {
            font-weight: bold;
            span {
              font-size: 0.3269rem;
            }
          }
        }
        .title {
          display: flex;
          align-items: center;
          .name {
            font-weight: bold;
            font-size: 0.2885rem;
          }
          .type {
            margin-left: 0.1923rem;
          }
        }
      }
      img {
        width: 1.5385rem;
        height: 1.5385rem;
        border-radius: 0.1923rem;
        margin-right: 0.1923rem;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 0.1923rem;

      .top {
        color: #7b7b7b;
      }

      img {
        width: 0.2885rem;
        height: 0.2885rem;
        margin-bottom: -0.0577rem;
      }

      .num {
        font-weight: bold;
        color: #666666;
        span {
          font-size: 0.3269rem;
          color: black;
        }
      }
    }
  }
}

.refresh {
  width: 100%;
  height: 100%;
  overflow: auto;
}
</style>